<template>
  <simple-button v-bind="$attrs" @click="onClick" />
  <teleport to="body">
    <el-dialog v-model="visible">
      <template #header>
        <slot name="title"></slot>
      </template>
      <template #default>
        <slot></slot>
      </template>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </teleport>
</template>
<script lang="ts" setup>
  import SimpleButton from '../button/SimpleButton.vue';
  import { ref } from 'vue';

  const visible = ref<boolean>(false);

  function onClick() {
    visible.value = true;
  }
</script>

<script lang="ts">
  // 声明额外的选项
  // noinspection JSUnusedGlobalSymbols
  export default {
    inheritAttrs: false
  };
</script>
